<template>
  <div class='forumDiv'>

    <div style="margin-bottom: 20px"><span style="text-align:left" class="el-icon-news">&nbsp;热门话题</span>
      <span style="float: right">
         <router-link :to='{name:"ForumCreatePath"}' style="color: #000000;text-decoration:none">
        <el-button type="text">POST</el-button>
              </router-link>
      </span>
    </div>
    <div v-for='item of topic' :key='item.id'
         style="width:100%;height:90px;border-bottom:  1px solid #ccc;margin-bottom: 20px">
      <div style="float:left;width:20%;margin-bottom: 20px">
        <div class="listLeftRecommend">{{item.voteNum}}</div>
        <div class="listLeftRecommend" style="background-color:#ccc;">{{item.collectNum}}</div>
      </div>
      <div style="float:left;margin-top:18px;">
        <div>
          <div class='stuff'>
            <!--<span>贡献者:bee</span>-->
            <span>创建于：{{item.createTime|formatDate}}</span>
          </div>
          <div style="margin-top:8px;">
            <div style="float:left;font-size:17px;margin-right:20px;font-weight:bold">
              <router-link :to='{name:"ForumContentPath",params:{id:item.id}}'
                           style="color: #000000;text-decoration:none">
                <span>{{item.title}}</span>
              </router-link>
            </div>
            <div style="float:left;"><span class="tag" v-for='tag of item.tag' :key='tag'>{{tag}}</span></div>
          </div>
        </div>
      </div>
    </div>
    <div class="pagination">
      <el-pagination background layout="prev, pager, next" :total="total" :page-size="5"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import {formatDate} from '../utils/date.js';

  export default {
    data() {
      return {
        topic: [],
        loading: true,
        gs: 'guoshuai',
        total: 0
      }
    },
    created() {
      this.checkoutUser();
      this.getData(1);
    },
    filters: {
      formatDate(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm');
        //此处formatDate是一个函数，将其封装在common/js/date.js里面，便于全局使用
      }
    },
    methods: {
      checkoutUser(){
        var _self = this;
        let _username = this.$store.state.username;
        if(_username==''){
          _self.$router.push('/login');
        }
      },
      // getPosts(section) {
      //   let url = 'forum/'+section
      //   this.$router.push('forum')
      // },
      handleCurrentChange(currentPage) {
        this.getData(currentPage);
      },
      getData(currentPage) {
        var _self = this;
        var url = 'topic'
        _self.$http.get(url, {params: {page: currentPage, size: 5}}).then(function (response) {
          console.log(response.data);
          var _data = response.data;
          if (_data.ret == true) {
            _data = _data.data;
            _self.topic = _data;
          }
          _self.total = response.data.total
        }).catch();
      }
    }
  }
</script>

<style scoped>
  .el-pagination .el-pager .active {

    background-color: #6bd5f1 !important;
  }

  .m20 {
    margin-bottom: 20px;
  }

  .forumDiv {
    padding: 0;
    box-sizing: border-box;
    border: none;
    background-color: #ffffff;
    width: 60%;
    display: block;
    margin-left: 5%;
    margin-top: 3%;

  }

  .stuff > span {
    font-size: 14px;
  }

  .desc {
    font-size: 1rem;
    color: #a1a8b8;
  }

  .listLeftRecommend {
    background-color: #009a61;
    float: left;
    text-align: center;
    line-height: 50px;
    margin-left: 10px;
    margin-top: 20px;
    font-size: 14px;
    padding: 0 10px;
    color: white;
  }

  .tag {
    color: #017e66;
    margin-right: 10px;
    display: block;
    float: left;
    line-height: 23px;
    padding: 0 12px;
    background-color: rgba(1, 126, 102, 0.08);
  }

  .profile {
    padding: 1rem;
    background: #eff2f7;
    border-radius: 0.3rem;
  }

  .profile div {
    margin-bottom: 1.5rem;
  }

  .profile div span {
    font-size: 25px;
    color: black;
    margin-left: 1rem;
  }

  .profile p {
    display: flex;
    align-items: center;
    color: grey;
    margin: 0.5rem 0;
  }

  .profile p span {
    margin: 0 0.5rem;
    color: black;
  }

  .profile svg {
    color: black;
    margin-left: 0.2rem;
  }

  .recentTopics img,
  .recentReplies img {
    width: 5rem;
    height: 5rem;
  }

  .recentTopics > p,
  .recentReplies > p {
    margin-bottom: 1rem;
    color: black;
    padding-bottom: 1.5rem;
  }

  .userTitle {
    font-size: 25px;
  }

  .recentTopics {
    padding: 1rem;
    background: #d3dce6;
    border-radius: 0.3rem;
  }

  .recentReplies {
    background: #e5e9f2;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 0.3rem;
  }

  .recentReplies div,
  .recentTopics div {
    display: flex;
    align-items: center;
    margin: 1rem 0;
    border-bottom: 2px solid #c0ccda;
    padding-bottom: 1rem;
  }

  .recentTopics div {
    border-bottom: 2px solid #99a9bf;
  }

  .recentReplies div img,
  .recentTopics div img {
    margin-right: 1rem;
  }

  .pagination {
    margin-top: 20px;
  }

  .el-pagination .el-pager .active {

    background-color: #6bd5f1
  }
</style>
